<template>


		<div class="super_container">

						<myheader :total_price="total" :count='count'></myheader>
				
						<!-- Home -->
				
						
				
						<!-- Home -->

<div class="home">
<div class="parallax_background parallax-window" data-parallax="scroll"   ></div>
<div class="home_container">
	<div class="home_content">
		<div class="home_title">Shop</div>
		<div class="breadcrumbs">
			<ul class="d-flex flex-row align-items-center justify-content-start">
				<li><a href="index.html">Home</a></li>
				<li><a href="#">Woman</a></li>
				<li>Accessories</li>
			</ul>
		</div>
	</div>
</div>
</div>

<!-- Products -->

<div class="products">

<!-- Sorting & Filtering -->
<div class="products_bar">
	<div class="section_container">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="products_bar_content d-flex flex-column flex-xxl-row align-items-start align-items-xxl-center justify-content-start">
						<div class="product_categories">
							<ul class="d-flex flex-row align-items-start justify-content-start flex-wrap">
								<li class="active"><a href="#">All</a></li>
								<li><a href="#">Hot Products</a></li>
								<li><a href="#">New Products</a></li>
								<li><a href="#">Sale Products</a></li>
							</ul>
						</div>
						<div class="products_bar_side ml-xxl-auto d-flex flex-row align-items-center justify-content-start">
							<div class="products_dropdown product_dropdown_sorting">
								<div class="isotope_sorting_text"><span>Default Sorting</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
								<ul>
									<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "original-order" }'>Default</li>
									<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "price" }'>Price</li>
									<li class="item_sorting_btn" data-isotope-option='{ "sortBy": "name" }'>Name</li>
								</ul>
							</div>
							<div class="product_view d-flex flex-row align-items-center justify-content-start">
								<div class="view_item active"><img src="../assets/images/view_1.png" alt=""></div>
								<div class="view_item"><img src="../assets/images/view_2.png" alt=""></div>
								<div class="view_item"><img src="../assets/images/view_3.png" alt=""></div>
							</div>
							<div class="products_dropdown text-right product_dropdown_filter">
								<div class="isotope_filter_text"><span>Filter</span><i class="fa fa-caret-down" aria-hidden="true"></i></div>
								<ul>
									<li class="item_filter_btn" data-filter="*">All</li>
									<li class="item_filter_btn" data-filter=".hot">Hot</li>
									<li class="item_filter_btn" data-filter=".new">New</li>
									<li class="item_filter_btn" data-filter=".sale">Sale</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="section_container">
	<div class="container">
		<div class="row">
			<div class="col">
				<div class="products_container grid">

					
					
					<!-- 循环遍历商品 -->


					<div v-for="good_info in goodslist">
						<div class="product grid-item hot">
						
						<div class="product_inner">
							<div class="product_image" style=" height:300px; margin-right:200px;">
								<img :src="getImgurl(good_info.image)">
							</div>
						</div>	
					</div>
					<div>
							<div class="product_title" style="color:black;"><h2>{{ good_info.name }}</h2></div>
							<div class="product_price">${{ good_info.price }}</div>
							<div class="product_price">{{ good_info.description }}</div>
							<div class="product_price">{{ good_info.specification }}</div>
							<div class="product_button ml-auto mr-auto trans_200"><a @click="add_cart(good_info)">添加到购物车</a></div>
					</div>
					</div>
					

				</div>
				<!-- 评论区 -->
				<div class='tinymce' style="width:800px; margin-right:100px;">
					<h2>购物闲暇之余,别忘记评论哦！！</h2>
					<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
					<button><a @click="comments()">{{ comm }}</a></button>
					<div v-html='tinymceHtml'></div>
						<div v-for="(comment,index) in comlist">
							{{index+1}}.&nbsp;&nbsp;&nbsp;{{comment['account']}}:<div v-html="comment['comment']">{{comment['account']}}</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
				
						<!-- Footer -->
				
						<myfooter></myfooter>


				
				
				</div>

	
</template>
	
	
	 
	<script>


		import myheader from './header.vue'
		import myfooter from './footer.vue'
		import Cookies from 'js-cookie'
		import tinymce from 'tinymce/tinymce'
		import 'tinymce/themes/silver/theme'
		import Editor from '@tinymce/tinymce-vue'
		import 'tinymce/plugins/image'
		import 'tinymce/plugins/link'
		import 'tinymce/plugins/code'
		import 'tinymce/plugins/table'
		import 'tinymce/plugins/lists'
		import 'tinymce/plugins/contextmenu'
		import 'tinymce/plugins/wordcount'
		import 'tinymce/plugins/colorpicker'
		import 'tinymce/plugins/textcolor'
	export default {
		data () {
			return {
				msg: "这是一个变量",
				//定义好变量接受接口返回的列表
				dataList:[],
				cartlist:[],
				comlist:[],
				total:0,
            	count:0,
				goodslist:{},
				comm:'发表评论',
				tinymceHtml: '',
				init: {
				language_url: '/static/tinymce/langs/zh_CN.js',
				language: 'zh_CN',
				skin_url: '/static/skins/ui/oxide',
				height: 300,
				plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
				toolbar:
				'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
				branding: false
				}
			}
		},
		components: {
		'myheader':myheader,
		'myfooter':myfooter,
		Editor
		},
		mounted:function(){

			let id = this.$route.query.id
			//获取数据
			this.getData(id);
			this.get_comments()
			//获取菜单
			this.common.get_menu();
		},
		methods:{
			changetest(index){
					this.clicked = index;
			},
            getImgurl:function(image){
                let image_url = this.base_url+'/static/upload/'
				let url = image_url+image
                return url
			},
			//异步获取数据方法
			getData: function(id) {
				let url  =  this.base_url + "/webgoods";           
				var _this= this;
				var data = { 
					'id':id 
					}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result) {
				_this.goodslist = result.data['goodslist']
				console.log(_this.goodslist)
			})
			},
			//添加购物车逻辑
            add_cart:function(good_info){
			let cartlist = this.goodslist;
            let findgood = 0;
            for(let i=0,l=cartlist.length;i<l;i++){
                    if(good_info.name == cartlist[i]['name']){
                        cartlist[i]['num']++;
                        findgood = 1;
                        break;
                    }
            }
            if(findgood==0){
				cartlist.push({'id':good_info['id'],'name':good_info['name'],'price':good_info['price'],'image':good_info['image'],'num':1});
				console.log(cartlist)
            }
			this.datalist = cartlist;
            Cookies.set('cart',this.datalist,{ expires: 7 })
            this.total_price()
            this.post_redis()
            console.log('添加购物车成功')
            },
			total_price:function(){
				let cartlist = this.datalist;
				this.total = 0
				this.count = 0
            	for(let i=0,l=cartlist.length;i<l;i++){
				this.total = this.total + (cartlist[i].price * cartlist[i].num);
				this.count = this.count + cartlist[i].num
				}
			},
			// 存入redis
            post_redis:function(){
				let url =  this.base_url + '/add_cart_redis'
                var _this = this
                var token = localStorage.getItem('token')
				var username = Cookies.get('username')
				var params = {
                    'cartlist':JSON.stringify(this.datalist),
                    'token':token,
					'username':username,
				}
                this.axios.post(url,this.qs.stringify(params))
                .then(function(result) {
				if(result.data['code'] == '200') {
					console.log(result.data.message)
				}
				else {
					_this.msg = result.data.message
					console.log(result.data)
				}
                }); 
			},
			comments:function(){
				let url =  this.base_url + '/comments'
				let _this = this
				let data = {
					'tinymceHtml':_this.tinymceHtml,
					'user_id':Cookies.get('user_id'),
					'cart_id':_this.$route.query.id,
					'cartlist':Cookies.get('cart'),
				}
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result){
					if (result.data.code == 200){
						console.log(result.data.message)
					}else{
						console.log(result.data.message)
					}
				})
			},
			get_comments:function(){
				let data = {
					'good_id':this.$route.query.id
				}
				let url =  this.base_url + '/get_comments'
				let _this = this
				this.axios.post(url,this.qs.stringify(data))
				.then(function(result){
					if (result.data.code == 200){
						_this.comlist = result.data.comlist
						console.log(_this.comlist)
					}else{
						console.log('未拿到商品id')
					}
				})
			}
		}
	}
	
	
	</script>
	 
	<style>
	
				@import '../assets/styles/categories.css';
				@import '../assets/styles/categories_responsive.css';
	
	</style>